<template>
	<view>
		<!-- <view ref="chartContainer1" id="chartContainer1" class="chart-container"></view>
		<view ref="chartContainer2" id="chartContainer2" class="chart-container"></view>
		<canvas canvas-id="myChart" :style="{width: '100%', height: '500px'}"></canvas> -->

		<view id="echarts" @click="echarts.onClick" :prop="option" 
			:change:prop="echarts.updateEcharts" class="echarts"></view>
	</view>
</template>

<script>
	// import * as echarts from 'echarts' // 引入ECharts库
	export default {
		data() {
			return {
				option: {
					tooltip: {
						trigger: 'item',
						formatter: '{b} <br/> {c} '
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					grid: {
						top: '1%',
						left: '1%',
						right: '1%',
						bottom: '7%',
						containLabel: true
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: true,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							position: 'outside',
							formatter: [
								'{name|{b}}',
								'{value|{c}}'
							].join('\n'),
							rich: {
								name: {
									color: '#c16d13',
									fontSize: 16,
									fontWeight: 'bold',
									lineHeight: 20,
								},
								value: {
									color: '#B8C0CE',
									fontSize: 12,
									fontWeight: '300',
									lineHeight: 20
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true,
							length: 5
						},
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
						]
					}]
				}
			}
		},
		mounted() {
			// this.initChart1()
			// this.initChart2()
			// this.initChart3()
		},
		methods: {
			onViewClick(options) {
				console.log(options)
			},
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				// const chartContainer = this.$refs.chartContainer2
				const chartContainer = document.getElementById("echarts")
				myChart = echarts.init(chartContainer) // 创建ECharts实例并传入图表容器
				let option = {
					tooltip: {
						trigger: 'item',
						formatter: '{b} <br/> {c} '
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					grid: {
						top: '1%',
						left: '1%',
						right: '1%',
						bottom: '7%',
						containLabel: true
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: true,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							position: 'outside',
							formatter: [
								'{name|{b}}',
								'{value|{c}}'
							].join('\n'),
							rich: {
								name: {
									color: '#c16d13',
									fontSize: 16,
									fontWeight: 'bold',
									lineHeight: 20,
								},
								value: {
									color: '#B8C0CE',
									fontSize: 12,
									fontWeight: '300',
									lineHeight: 20
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true,
							length: 5
						},
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
						]
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				// myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.chart-container {
		height: 680rpx;
	}

	.echarts {
		width: 100%;
		height: 680rpx;
	}
</style>